<!--核心元模型-->

<template>
  <el-row style="height: 100vh">
    <el-col :span="6"
      style="height: 100%; padding-left: 10px; padding-top: 20px; border-right: 1px solid #dfe6ec; display: block; overflow-y: scroll">
      <div class="l-one">模型关系名称: 实体关系元模型</div>
      <div class="comp-tree">
        <div class="l-one" style="padding: 10px">
          <span style="border-left: 2px solid blue; font-size: 20px">&nbsp;&nbsp;&nbsp;选择数据模型</span>
        </div>
        <hr />

        <div class="l-three">
          <el-input placeholder="输入关键字进行过滤~" v-model="filterText"></el-input>

          <el-tree ref="SlotTree" :data="treeList" :props="defaultProps" :current-node-key="currentNodekey"
            :filter-node-method="filterNode" :expand-on-click-node="false" highlight-current :node-key="NODE_KEY"
            @node-click="handleNodeClick" style="margin-top: 1rem">
            <div class="comp-tr-node" slot-scope="{ node, data }">
              <!-- 非编辑状态 -->
              <template>
                <span v-if="data.isDirectory != '1'"
                  :class="[data[NODE_KEY] < NODE_ID_START ? 'is-new' : '', 'comp-tr-node--name']">
                  {{ node.label }}
                </span>
                <span v-else>
                  {{ node.label }}
                </span>
              </template>
            </div>
          </el-tree>
        </div>
      </div>
    </el-col>

    <el-col :span="17" style="margin-top: 1%; margin-left: 2%">
      <el-col :span="22">
        <div class="text-right">
          <!-- <el-button type="primary" icon="el-icon-plus">同步血缘数据</el-button> -->
          <!-- <el-button
            type="primary"
            icon="el-icon-view"
            @click="view"
            >查看模型关系</el-button
          > -->
          <!-- <el-button
            type="primary"
            icon="el-icon-edit"
            @click="edit"
            >编辑模型关系</el-button
          > -->
          <el-button @click="recover" type="primary" icon="el-icon-refresh">重置</el-button>
          <el-button @click="baocun" type="primary" icon="el-icon-check">保存</el-button>
          <el-button type="primary" @click="$router.push('/metadata/metaModel/core')" icon="el-icon-back"> 返回
          </el-button>
        </div>
      </el-col>
    </el-col>
    <el-col :span="17" style="margin: 5px 0px">
      <x6Model ref="canvashab" :listArrrayTo="listArrray" @testValue="testValue" @sourceortarge="sourceortarge" />
    </el-col>

    <!-- ref -->
    <configuringModelRelationships ref="opencreateisbool" @itemValue="itemValue" />
  </el-row>
</template>

<style scoped>
.text-right {
  float: right;
}

#model-graph-container {
  background-image: url('../../../../../assets/dataRelationBg.png');
  /* 设置背景图像的 URL */
  background-size: cover;
  /* 控制背景图像的尺寸适应容器 */
  /* background-repeat: repeat; */
  /* 其他背景样式属性，如背景颜色、重复方式等 */
}

/* 自定义节点的样式 */
.el-tree-node__content:hover {
  background-color: #e0e0e0;
  cursor: pointer;
}

/* 自定义工具提示的样式 */
.el-tooltip__popper {
  z-index: 9999;
  /* 确保工具提示显示在顶部 */
}

#treeBox {
  margin-top: 1px;
  /*
  .el-table thead {
    display: none;
  } */
}

.span {
  color: #606266;
  font-weight: 700;
  font-size: 14px;
}
</style>

<script>
import treeData from '@/views/masterdata/treeData.vue'
import Import from '@/components/Import/import'
import waves from '@/directive/waves' // waves directive
import drag from '@/directive/drag' // waves directive
import permission from '@/directive/permission/permission'
import editView from './editView/index.vue'
import Pagination from '@/components/Pagination'
import { dataDirectoryList } from '@/api/masterdata/masterdataTablelist'
import { metaModelfieldRelation, fieldRelation } from '@/api/metadata/label/metadataLabel.js'
import configuringModelRelationships from '../configuringModelRelationships/index.vue'
import x6Model from '../ConfigurationRelationships/3wimodel/index.vue'

export default {
  name: 'customToolbar',
  watch: {
    filterText(val) {
      this.$refs.SlotTree.filter(val)
    },

    deep: true,
  },
  computed: {
    ids() {
      const ids = []
      this.multipleSelection.forEach((ele) => {
        ids.push(ele.id)
      })
      return ids.join(',')
    },
  },
  components: {
    configuringModelRelationships,
    Pagination,
    Import,
    editView,
    treeData,
    x6Model,
  },
  directives: { waves, permission, drag },
  data() {
    return {
      routelistArrray: [],
      isbool: false,
      ruleForm: {},
      listArrray: [{ id: '' }],
      listArrrayOne: [],
      isbool: false,
      NODE_KEY: 'id',
      NODE_ID_START: 0, // 新增节点id，逐次递减-->
      opencreateModel: false,
      eitdValue: {},
      index: '',
      dialogVisible: false,
      edgesRelation: {},
      openTableTitle: '',
      nodeTableInfo: [],
      edgeInfo: [],
      nodeDrawer: false,
      edgeDrawer: false,
      direction: 'rtl',
      filterText: '',
      tableKey: 0,
      treeList: [],
      labelList: [],
      list: null,
      total: 0,
      multipleSelection: [],
      downloadLoading: false,
      listLoading: true,
      pageArray: this.$store.getters.pageArray,
      initParam: {
        // 新增参数-->
        name: '新增节点',
        parentId: 0,

        children: [],
      },
      ruleObj: {},
      listQuery: {
        columnName: undefined,
        directoryId: undefined,
        ancestralId: '8',
        page: 1,
        limit: this.$store.getters.defaultPageSize,
      },
      entityQuery: {},
      currentNodekey: '',
      treeData: [],
      defaultProps: {
        // 默认设置-->
        children: 'children',
        label: 'name',
      },
      name: '',
      nodes: [],
      edges: [],
      graph: null,
      editor: null,
      palettes: {},
      graphXml: '',
      activeNames: ['1', '2', '3'],
      isNode: false,
      cellStyle: '',
      graphX: 100,
      graphY: 10,
      undoMng: '',
      textValue: '',
      uploadDataVisible: false,
      isOutputXml: false,
      edgeStyle: 'orthogonalEdgeStyle',
      outline: '',
      idSeed: 0,
      normalIdSeed: 0,
      // configOrder: 0,
      jsonData: {
        cells: {
          nodes: [],
          groups: [],
        },
        edges: [],
      },
      showBackground: true,
      currentNormalType: {},
      normalTypePosition: {
        top: '0',
        left: '0',
      },
      x: 300,
      y: 70,
      type: '',
      editX: 100,
      editY: 300,
      processedIds: [],
    }
  },

  created() {
    this.type = this.$route.query.type
    this.getTreeList()
    if (this.type == 'edit') {
      let modelId = this.$route.query.modelId
      fieldRelation({ modelId: modelId }).then((res) => {
        const cellList = res.data.rows[0].x6List[0].cellList
        if (cellList.length > 0) {
          cellList.map((item) => {
            this.processedIds.push(item.tableId)
          })
          console.log(this.processedIds, '编辑下的id列表')
        }
      })
    }
  },
  mounted() {
    if (this.$route.query.nodes) {
      this.$route.query.nodes.map((v, i) => {
        this.listArrray.push(v)
      })
      this.routelistArrray = this.listArrray
    }
  },

  methods: {
    // ref
    sourceortarge(item) {
      // console.log(this.$refs.opencreateisbool)
      this.$refs.opencreateisbool.open(item)
      this.$refs.opencreateisbool.editopen()
    },

    itemValue(item) {
      this.ruleObj = item
    },
    testValue(item) {
      if (item.data) {
        this.name = item.data.labels[0].attrs.label.text
      }
    },
    // removeItem(item) {
    //   this.listArrray.map((v, i) => {
    //     if (v.id == item.id) {
    //       this.listArrray.splice(i, 1)
    //     }
    //   })
    // },
    baocun() {
      this.$refs.canvashab.submitList()
    },
    recover() {
      this.$refs.canvashab.removeedgelist()

      this.$confirm('确定重置所有数据吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          localStorage.removeItem('data')
          localStorage.removeItem('date')

          this.processedIds = []
          this.x = 300
          this.y = 70
          this.editX = 100
          this.editY = 300
          if (this.$refs.canvashab) {
            this.$refs.canvashab.resetList()
          }
        })
        .catch(() => { })
    },
    editdata() {
      this.$refs.editclick.on()
    },
    handleAddTop() {
      // 添加顶部节点
      let obj = JSON.parse(JSON.stringify(this.initParam)) // copy参数
      obj.parentId = 0
      obj.name = ''
      obj[this.NODE_KEY] = --this.startId // 节点id：逐次递减id
      // console.log(obj,'顶部参数')
      this.$refs.treeForm.handleCreate(obj, 9)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    handleNodeClick(val) {
      this.listQuery.modelId = val.modelId
      this.listQuery.directoryId = val.id
      if (this.type == 'add') {
        if (!this.processedIds.includes(this.listArrray[0].tableId)) {
          if (this.y > 500) {
            this.x += 310
            this.y = 70
          } else {
            this.y += 100
          }
          this.processedIds.push(this.listArrray[0].tableId)
        }
      } else if (this.type == 'edit') {
        console.log('peizhi')
        if (!this.processedIds.includes(this.listArrray[0].tableId)) {
          // console.log(this.processedIds, 'ididididididi')
          if (this.editY > 500) {
            this.editX += 310
            this.editY = 400
          } else {
            this.editY += 100
          }
          this.processedIds.push(this.listArrray[0].tableId)
          this.x = this.editX
          this.y = this.editY
        }
      }

      if (val.isDirectory == 1) {
        this.listArrray = [
          {
            id1: val.id,
            tableId: val.modelId,
            tableDescription: val.description,
            tableName: val.label,
            x: this.x,
            y: this.y,
          },
        ]
      }
      console.log(this.listArrray, 'edit de  this.listArrrayTo')
    },
    getTreeList() {
      this.listLoading = true
      dataDirectoryList(this.listQuery).then((response) => {
        if (response.data.code == 0) {
          this.treeList = response.data.data
          if (this.treeList.length > 0) {
            this.listQuery.directoryId = this.treeList[0].children[0].id
            this.currentNodekey = this.treeList[0].id
            this.$nextTick(() => {
              this.$refs.SlotTree.setCurrentKey(this.currentNodekey) //一定要加这个选中了否则样式没有出来
            })
          }
          this.listLoading = false
        }
        this.listLoading = false
      })
    },
  },
}
</script>
<style lang="scss" scoped></style>
